<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js - pointerlock controls</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			html, body {
				width: 100%;
				height: 100%;
			}
			body {
				background-color: #ffffff;
				margin: 0;
				overflow: hidden;
				font-family: arial;
			}
			#blocker {
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.5);
			}
			#instructions {
				width: 100%;
				height: 100%;
				display: -webkit-box;
				display: -moz-box;
				display: box;
				-webkit-box-orient: horizontal;
				-moz-box-orient: horizontal;
				box-orient: horizontal;
				-webkit-box-pack: center;
				-moz-box-pack: center;
				box-pack: center;
				-webkit-box-align: center;
				-moz-box-align: center;
				box-align: center;
				color: #ffffff;
				text-align: center;
				cursor: pointer;
			}
			#chatPanel {
				position: absolute;
				left: 0;
				bottom: 0;
				background: #ffffffaa;
				padding: 1rem;
				width: 20rem;
				word-wrap: break-word;
			}
			#chatInput {
				margin-top: 0.5rem;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<script src="https://cdn.bootcss.com/three.js/90/three.min.js"></script>
		<script src="https://cdn.bootcss.com/socket.io/2.0.4/socket.io.js"></script>
		<script src="PointerLockControls.js"></script>

		<div id="blocker">

			<div id="instructions">
				<span style="font-size:40px">Click to play</span>
				<br />
				(W, A, S, D = Move, SPACE = Jump, ENTER = Chat, MOUSE = Look around)
			</div>

		</div>

		<div id="chatPanel">
			<input id="chatInput" type="text" />
		</div>

		<script src="index.js"></script>
	</body>
</html>